<template>
  <div class="addPosiIndex" @click="masked">
    <userHeader/>
    <fixed/>
    <div class="breadClum">
            <span>
               <router-link :to="{path:'/pageIndex'}">   <a class="bread1">当前位置：首页  >  </a></router-link>
                <router-link :to="{path:'/logList'}">  <a class="bread2">系统日志 ></a></router-link>
                <router-link :to="{path:'/usersLog'}">  <a class="bread2"> 用户目录日志></a></router-link>
                <a class="bread2">修改用户权限</a>
            </span>
    </div>
    <div class="e-form">
      <el-form ref="form" :model="form" label-width="106px">
        <div class="e-form-top">
          <el-form-item label="用户名称">
            <el-input v-model="form.user_name" autocomplete="off" readonly=""></el-input>
          </el-form-item>
          <el-form-item label="真实姓名">
            <el-input v-model="form.real_name" autocomplete="off" readonly=""></el-input>
          </el-form-item>
          <el-form-item label="用户角色" prop="role_name">
            <el-input v-model="form.role_name" autocomplete="off" readonly=""></el-input>
          </el-form-item>
        </div>
        <div class="e-form-t" v-for="(item,index) in form.auth_parent" :key="index">
          <div class="e-form-t-check">
            <el-form-item>
              <el-checkbox disabled v-model="item.checkAll" :label="item.name.auth_id">{{item.name.auth_name}}</el-checkbox>
              <div class="e-checkbox-group">
                <el-checkbox-group disabled v-model="item.check_auth_list">
                  <!-- <span>{{item.check_auth_list}}</span> -->
                  <div class="el-checkbox-group">
                    <el-checkbox :label='item2.auth_id' v-for="(item2,index2) in item.auth_list" :key="index2">
                      {{item2.auth_name}}
                    </el-checkbox>
                  </div>
                </el-checkbox-group>
              </div>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>

  </div>
</template>

<script>
  import userHeader from '@/components/header.vue'
  import fixed from '@/components/fixed.vue'

  var mdSecret = 'fangyou968123456'
  export default {
    name: "modifyUserAuthority",
    data() {
      return {
        totalAuth: [],
        form: {
          auth_parent: [],
          auth_list: [],
          checkAllAuth: false,
        }
      }
    },
    methods: {
      masked(event) {
        console.log("SSSSSSSSSSSS")
        event.stopPropagation();
        return false;
      },
      getAuthor() {
        //获取权限列表
        return this.axios.get('/api/v1/system/authority')
      }


    },
    created() {
      //获取所有的权限列表
      this.getAuthor().then(res => {
        if (res.data.code == 0) {
          this.totalAuth = res.data.data;
          for (var i in res.data.data) {
            if (res.data.data[i].auth_pid == 0) {
              this.form.auth_parent.push({
                name: res.data.data[i], //顶级权限类目
                auth_list: [], //顶级权限类目下的项目
                checkAll: false, //是否全选的标记
                isIndeterminate: true,
                check_auth_list: [], //被选的中的元素
              })
            }
          }

          for (var i in this.form.auth_parent) {
            for (var j in this.totalAuth) {
              if (this.form.auth_parent[i].name.auth_id == this.totalAuth[j].auth_pid) {
                this.form.auth_parent[i].auth_list.push(this.totalAuth[j])
              }
            }
          }

          console.log(this.form.auth_parent)
        } else {
          this.$alert(res.data.message, '提示')
        }

      }).then(()=>{
        //获取用户修改之前的权限列表
        this.axios.get("/api/v1/blog/userauthoritylog/" + this.$route.query.userlog_id).then(res => {
          if (res.data.code == 0) {
            this.form.user_name = res.data.data.user_name;
            this.form.real_name = res.data.data.real_name;
            this.form.role_name = res.data.data.role_name;

            //将用户权限列表 按顶级权限 整理
            console.log(res.data.data)
            this.form.auth_parent.forEach((el, i) => {
              res.data.data.authority_list.forEach(element => {
                //将数据 加到 每一项的 checklist
                // console.log(el.name.auth_id == element.auth_pid)
                if (el.name.auth_id == element.auth_pid) {
                  el.check_auth_list.unshift(element.auth_id);
                }
              })

              el.checkAll = el.auth_list.length == el.check_auth_list.length ? true : false
            })

          } else {
            this.$alert(res.data.message, '提示')
          }
        })

      })

    },
    components: {
      fixed,
      userHeader,
    },
  }
</script>
<style scoped>
  .addPosiIndex {
    width: 100%;
    height: 100%;
    background: #f1f1f1;
    padding: 10px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
  }

  .addPosiIndex .el-form {
    background: white;
  }

  .addPosiIndex .el-form >>> .e-form-top {
    background: #f3f9ed;
    padding: 30px 0;
    margin-bottom: 10px;
  }

  .addPosiIndex .el-form >>> .e-form-t {
    background: #f3f9ed;
  }

  .addPosiIndex .el-form >>> .el-form-item__label {
    width: 106px;
    margin-left: 72px;
    text-align: right;
  }

  .addPosiIndex .el-form >>> .el-input {
    width: 378px;
    height: 38px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
  }

  .addPosiIndex .e-form {
    margin: 0 10px;
    padding: 10px 28px;
    background: white;
  }

  .addPosiIndex .el-form >>> .el-form-item {
    margin-bottom: 24px;
  }

  .addPosiIndex .el-form >>> .e-form-t .el-checkbox-group {
    padding-right: 300px;
    background: #e4f1d5;
    padding-left: 46px;
    margin-bottom: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .addPosiIndex .el-form >>> .e-form-t .el-checkbox {
    margin-left: 0;
    width: 300px;
  }

  .addPosiIndex .el-form >>> .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background: #8bc34a;
    border-color: #8bc34a;
  }

  .addPosiIndex .el-form >>> .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #333333;
  }

  .addPosiIndex .el-form >>> .el-checkbox__inner {
    width: 18px;
    height: 18px;
  }

  .addPosiIndex .el-form >>> .el-checkbox__label {
    font-size: 14px;
  }

  .addPosiIndex .el-form >>> .el-checkbox__inner::after {
    left: 6px;
    width: 4px;
    height: 10px;
  }

  .addPosiIndex .el-form >>> .el-form-item__error {
    left: 80px;
  }

  .addPosiIndex .el-form >>> .el-form-btn .el-form-item__content {
    text-align: center;
  }

  .addPosiIndex .el-form >>> .el-form-btn .el-form-item__content .el-button--primary {
    background: #8bc34a;
    color: white;
    font-size: 16px;
    border-color: #8bc34a;
  }

  .addPosiIndex .el-form >>> .el-form-btn .el-form-item__content .el-checkbox {
    margin-right: 47px;
  }

  .addPosiIndex .el-form >>> .el-form-btn .el-button {
    padding: 9px 24px;
  }

  .addPosiIndex .el-form >>> .e-checkbox-group {
    padding-right: 80px;
  }

  @media screen and (max-width: 1400px) {
    .addPosiIndex {
      padding: 6px;
    }

    .addPosiIndex .el-form >>> .e-form-t .el-checkbox {
      margin-left: 0;
      width: 240px;
    }

    .addPosiIndex .el-form >>> .e-checkbox-group {
      padding-right: 40px;
    }

    .addPosiIndex .el-form >>> .e-form-t .el-checkbox-group {
      padding-right: 0px;
    }
  }
</style>

